.card {
  > .table,
  .table-responsive > .table {
  	border-right: 0;
  	border-left: 0;
    margin-bottom: 0;

    &:last-child, &:last-of-type {
			border-bottom: 0;
		}

  	td:first-child,
		th:first-child {
			border-left: 0;
		}

  	td:last-child,
		th:last-child {
			border-right: 0;
		}

  	tr:first-child td,
		tr:first-child th {
			border-top: 0;
		}

  	tr:last-child td {
			border-bottom: 0;
		}
	}

  .card-header + .table,
  .card-header + .table-responsive > .table {
    border-top: 0;
	}
}

.card .card {
  border-radius: $border-radius;
}

.card-header, .card-footer {
  background-color: transparent;
}
.card-header {
  display: flex;
  align-items: center;
  height: 54px;
  border-bottom: 1px solid $gray-50;
  padding-right: 1rem;

  .card-title {
    margin-bottom: 0;
    font-size: $font-size-plus;
    font-family: $font-family-sans-serif;
  }
}
.card-footer {
  border-top-width: 0;
}

.card-footer.border-top, .card-body.border-top, .card .border-top, .card .border-bottom, .card .list-group-item  {
  border-color: $gray-50 !important;
}

.card, .card-lg {
  border-width: $card-border-width;
  border-style: solid;
  border-color: $card-border-color;
  background-color: $card-bg;
  border-radius: $card-border-radius;
}
.card-lg {
  margin-bottom: 1rem;
  padding: 0;
}

.card-text {
  overflow-wrap: anywhere;
}

.card-body .form-group:last-child {
  margin-bottom: 0;
}

.card-header .arrow {
  @extend .w-auto;
  &:before {
    transition: .3s transform ease-in-out;
  }
}
.card-header .collapsed .arrow:before {
  transform: rotate(-90deg);
}

.collapsable-card {
  @extend .card;
  @extend .overflow-hidden;

  .card-header {
    &:hover {
      background-color: $light !important;
    }
  }
  .card-body {
    border-top: 1px solid $gray-50;
  }

  // Arrow rotation when details is open
  &[open] .arrow {
    transform: rotate(90deg) !important;
  }

  &:not([open]) .arrow {
    transform: rotate(0deg) !important;
  }
}

.collapsable-card, .card {
  // Details/Summary styling for cards
  details {
    summary {
      cursor: pointer;
      list-style: none;
      user-select: none;
      
      &::-webkit-details-marker {
        display: none;
      }
      
      &::marker {
        display: none;
      }

      // Ensure summary is clickable and accessible
      &[role="button"] {
        outline: none;
        
        &:focus {
          outline: 2px solid $primary;
          outline-offset: -2px;
        }
      }
    }
  }
}